<template>
  <navbar title="我的订阅">
  </navbar>
  <view class="sreach">
     <u-search placeholder="关键字搜索" 
     shape="square" 
     height="80rpx"
     bg-color="#f7f7f7" 
     margin="24rpx 30rpx 26rpx 30rpx" 
     placeholderColor="#9ca3af"
     :show-action="false"
     search="handleSearch"
     v-model="question"
     >
    </u-search>
  </view>
  <view class="content">
    <view v-for="(item ,index) in information" class="item" @click="goToPolicy(item)">
      <view class="ico">{{item.title.slice(0,2)}}</view>
      <view class="rightContent">
        <view class="title">{{item.title}}</view>
        <view class="time">最新发布 {{item.time}}</view>
      </view>
      <view class="rightIcons">
        <view class="unread" v-if="item.unread>0">
        {{item.unread > 99 ?'99+':item.unread}}
        </view>
        <image src="../../static/最新政策详情ico.png" ></image>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import navbar from '@/components/navbar/navbar.vue';
import { uesNavBarStyle } from '@/utils/system';

  const information=ref([
    {
        title: "人才落户政策",
        time: "2025-07-09 19：49",
        unread:2
      },
      {
        title: "灵活就业社保通", 
        time: "2025-07-08 15：25",
        unread:11
      },
      {
        title: "人才公寓惠青",
        time: "2025-07-07 13：48",
        unread:5
      },
      {
        title: "创业贷款贴息",
        time: "2025-07-07 08：24",
        unread:1
      },
      {
        title: "公租房青年优先",
        time: "2024-07-04 09：24",
        unread:0
      }
  ])
  const goToPolicy = (item) =>{
    uni.navigateTo({
      url:`/pages/policyDetail/policyDetail?title=${encodeURIComponent(item.title)}&time=${encodeURIComponent(item.time)}&detail=${encodeURIComponent(item.detail)}`
    })
  }
</script>

<style lang="scss">
  .sreach{
    border-bottom: 2rpx solid #fff6f2;
  }
  .content{
    padding: 30rpx 30rpx 0 30rpx  ;
  }
  .item{
    display: flex;
    align-items: center;
    padding-bottom: 32rpx;
    border-bottom: 2rpx solid #f5f5f5;
    margin-bottom: 30rpx;
  }
  .ico{
    width: 90rpx;
    height: 90rpx;
    background-color: #e1383c;
    border-radius: 16rpx;
    color: white;
    align-items: center;
    justify-content: center;
    margin-right: 20rpx;
    display: flex;
    font-size: 30rpx;
  }
  .rightContent{
    flex: 1;
  }
  .title{
    font-size: 32rpx;
    color: #333333;
    margin-bottom: 14rpx;
  }
  .time{
    font-size: 28rpx;
    color: #9ca3af;
  }
  .rightIcons{
    display: flex;
    align-items: center;
    margin-left: 20rpx;
  }
  .unread{
    width: 30rpx;
    height: 30rpx;
    background-color: #e1383c;
    color: white;
    font-size: 22rpx;
    align-items: center;
    text-align: center;
    justify-content: center;
    border-radius: 50%;
    margin-right: 12rpx;
  }
    
  .rightIcons image{
    width: 12rpx;
    height: 21rpx;
    display: inline-block;
  }
</style>
